<template>
  <div
    class="page-wrapper"
    id="main-wrapper"
    data-layout="vertical"
    data-navbarbg="skin6"
    data-sidebartype="full"
    data-sidebar-position="fixed"
    data-header-position="fixed"
  >
    <!-- Sidebar Start -->
    <aside class="left-sidebar">
      <!-- Sidebar scroll-->
      <div>
        <div
          class="brand-logo d-flex align-items-center justify-content-between"
        >
          <RouterLink
            active-class="active"
            to="/index"
            class="text-nowrap logo-img"
          >
            <img src="/assets/images/logos/dark-logo.svg" width="180" alt="" />
          </RouterLink>
          <div
            class="close-btn d-xl-none d-block sidebartoggler cursor-pointer"
            id="sidebarCollapse"
          >
            <i class="ti ti-x fs-8"></i>
          </div>
        </div>
        <!-- Sidebar navigation-->
        <nav class="sidebar-nav scroll-sidebar" data-simplebar="">
          <ul id="sidebarnav">
            <li class="nav-small-cap">
              <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
              <!-- <span class="hide-menu">Home</span> -->
              <!-- <span v-if="text"> {{ text }}{{ counter.count }}</span> -->
              <!-- <button @click="counter.increment">加</button> -->
            </li>
            <li class="sidebar-item">
              <RouterLink
                active-class="active"
                class="sidebar-link"
                to="/index"
                aria-expanded="false"
              >
                <span>
                  <i class="ti ti-layout-dashboard"></i>
                </span>
                <span class="hide-menu">首页</span>
              </RouterLink>
            </li>
            <li class="nav-small-cap">
              <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
              <span class="hide-menu">资源</span>
            </li>
            <li class="sidebar-item">
              <RouterLink
                active-class="active"
                class="sidebar-link"
                tag="a"
                to="/Buttons_a"
                aria-expanded="false"
              >
                <span>
                  <i class="ti ti-article"></i>
                </span>
                <span class="hide-menu">Java</span>
              </RouterLink>
            </li>
            <li class="sidebar-item">
              <RouterLink
                active-class="active"
                class="sidebar-link"
                tag="a"
                to="/Alerts"
                aria-expanded="false"
              >
                <span>
                  <i class="ti ti-alert-circle"></i>
                </span>
                <span class="hide-menu">Node</span>
              </RouterLink>
            </li>
            <li class="sidebar-item">
              <RouterLink
                active-class="active"
                class="sidebar-link"
                tag="a"
                to="/Card"
                aria-expanded="false"
              >
                <span>
                  <i class="ti ti-cards"></i>
                </span>
                <span class="hide-menu">建模</span>
              </RouterLink>
            </li>
            <li class="sidebar-item">
              <RouterLink
                active-class="active"
                class="sidebar-link"
                tag="a"
                to="/Forms"
                aria-expanded="false"
              >
                <span>
                  <i class="ti ti-file-description"></i>
                </span>
                <span class="hide-menu">地图</span>
              </RouterLink>
            </li>
            <li class="sidebar-item">
              <RouterLink
                active-class="active"
                class="sidebar-link"
                tag="a"
                to="/Typography"
                aria-expanded="false"
              >
                <span>
                  <i class="ti ti-typography"></i>
                </span>
                <span class="hide-menu">前端</span>
              </RouterLink>
            </li>
            <li class="nav-small-cap">
              <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
              <span class="hide-menu">兴趣页</span>
            </li>
            <li class="sidebar-item">
              <RouterLink
                active-class="active"
                class="sidebar-link"
                tag="a"
                to="/Login"
                aria-expanded="false"
              >
                <span>
                  <i class="ti ti-login"></i>
                </span>
                <span class="hide-menu">登录</span>
              </RouterLink>
            </li>
            <li class="sidebar-item">
              <RouterLink
                active-class="active"
                class="sidebar-link"
                tag="a"
                to="/Register"
                aria-expanded="false"
              >
                <span>
                  <i class="ti ti-user-plus"></i>
                </span>
                <span class="hide-menu">注册</span>
              </RouterLink>
            </li>
            <li class="nav-small-cap">
              <i class="ti ti-dots nav-small-cap-icon fs-4"></i>
              <span class="hide-menu">友情分享</span>
            </li>
            <li class="sidebar-item">
              <RouterLink
                active-class="active"
                class="sidebar-link"
                tag="a"
                to="/Icons"
                aria-expanded="false"
              >
                <span>
                  <i class="ti ti-mood-happy"></i>
                </span>
                <span class="hide-menu">资源链接</span>
              </RouterLink>
            </li>
            <li class="sidebar-item">
              <RouterLink
                active-class="active"
                class="sidebar-link"
                tag="a"
                to="/SamplePage"
                aria-expanded="false"
              >
                <span>
                  <i class="ti ti-aperture"></i>
                </span>
                <span class="hide-menu">推送资讯</span>
              </RouterLink>
            </li>
          </ul>
          <div
            class="unlimited-access hide-menu bg-light-primary position-relative mb-7 mt-5 rounded"
          >
            <div class="d-flex">
              <div class="unlimited-access-title me-3">
                <h6 class="fw-semibold fs-4 mb-6 text-dark w-85">
                  Upgrade to pro
                </h6>
                <a href="#" class="btn btn-primary fs-2 fw-semibold lh-sm"
                  >Buy Pro</a
                >
              </div>
              <div class="unlimited-access-img">
                <img
                  src="/assets/images/backgrounds/rocket.png"
                  alt=""
                  class="img-fluid"
                />
              </div>
            </div>
          </div>
        </nav>
        <!-- End Sidebar navigation -->
      </div>
      <!-- End Sidebar scroll-->
    </aside>
    <!--  Sidebar End -->
    <!--  Main wrapper -->
    <div class="body-wrapper">
      <!--  Header Start -->
      
      <HeaderBox></HeaderBox>
      <!--  Header End -->
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script>
import { RouterView, RouterLink } from "vue-router";
import { useCounterStore } from "../pinia";
import { ref, onMounted,getCurrentInstance } from "vue";
import HeaderBox from './headerbox.vue'
export default {
  components: { RouterView, RouterLink,HeaderBox },
  setup() {
    const counter = useCounterStore();
    const self = getCurrentInstance();
    let api = null;
    if(!import.meta.env.SSR) {
      api = self.appContext.config.globalProperties.$getApi("src_apis_index")
    }
    const text = ref(false);
    onMounted(() => { // 预处理数据 热更新的时候不会置空反而会叠加 asyncData 是为了 把数据提前放进去组件 但只能在组件加载完成的周期里展示
      console.log("onMounted", counter.count,api);
      text.value = true; // 必须判断 不然会报错 页面加载完成服务器和客户端都是一样的节点 必须等组件加载完成再展示数据保存同步 js水和
      //
      // axios.get("/api").then((res) => {
      //   console.log(res.data, "axios2");
      //   counter.count = counter.count + 11;
      // });
    });
    return {
      counter,
      text,
    };
  },
  asyncData({ pinia, route }) {
    console.log("asyncData", pinia.state, route.path);
    const counter = useCounterStore();
    return counter.get(12);
  },
};
</script>
